<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>表单全屏层</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<link rel="stylesheet" href="../lib/layui/css/layui.css">
        	<link rel="stylesheet" href="../css/hp-common.css">
	</head>

	<body>
		<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
			<ul class="layui-tab-title">
				<li class="layui-this">示例</li>
				<li>说明</li>
			</ul>
			<div class="layui-tab-content" style="height: 100px;">
				<div class="layui-tab-item layui-show">

					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
						<legend>弹出窗口层</legend>
					</fieldset>

					<button id="cBtn" class="layui-btn">自定义弹窗</button>

					<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
						<legend>弹出列表层</legend>
					</fieldset>
					<form class="layui-form" onsubmit="return false">
						<div class="layui-form-item">
							<label class="layui-form-label">用户名:</label>
							<div class="layui-input-inline">
								<input id="name" type="text" name="name" lay-verify="title" autocomplete="off" placeholder="请输入用户名" class="layui-input">
							</div>
							<div class="" style="margin-left: -8px;">
							<button  id="listBtn" class="layui-btn layui-btn-normal">单选选择(radio方式)</button>
							<button  id="listBtn2" class="layui-btn layui-btn-normal">单选选择(checkbox方式)</button>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">城市:</label>
							<div class="layui-input-inline"> 
								<input id="city" type="text" name="city" lay-verify="required" placeholder="请输入城市" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">职业:</label>
							<div class="layui-input-inline"> 
								<input id="job" type="text" name="job" lay-verify="required" placeholder="请输入总金额" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">财富:</label>
							<div class="layui-input-inline"> 
								<input id="money" type="text" name="money" lay-verify="required" placeholder="请输入财富" autocomplete="off" class="layui-input">
							</div>
						</div>

					</form>

				</div>
				<div class="layui-tab-item">

					<blockquote class="layui-elem-quote layui-text">
						hpWindow.openList(elm, url, dataObj,callBack, opt)<br/>
						注意:<br/>
						elm:绑定的元素<br/>
						url:接口地址<br/>
						dataObj:数据参数<br/>
						callBack:回调函数<br/>
						opt:layer.open 参数<br/>
					</blockquote>

				</div>
			</div>
		</div>

		<script src="../lib/layui/layui.js"></script>

		<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
		<script>
			// 配置
			layui.config({
				base: '../hpModules/' // 扩展模块目录
			}).extend({ // 模块别名 
				hpWindowS: 'hpComponent/hpWindowS',
				hpWindow: 'hpComponent/hpWindow',
				hpConfig : 'hpComponent/hpConfig',
			});
			layui.use(['table', 'hpWindow','hpWindowS'], function() {
				var table = layui.table;
				var hpWindow = layui.hpWindow;
				var hpWindowS = layui.hpWindowS;
				var $=layui.$;
				hpWindow.openList("#listBtn",'html/list.html',{},function(data,index,layro){
					//layer.alert(JSON.stringify(data))
					var json=data[0];
					$('#name').val(json.username);
					$('#city').val(json.city);
					$('#job').val(json.classify);
					$('#money').val(json.wealth);
				})
				hpWindowS.openList("#listBtn2",'html/list2.html',{},function(data,index,layro){
					//layer.alert(JSON.stringify(data))
					var json=data[0];
					$('#name').val(json.username);
					$('#city').val(json.city);
					$('#job').val(json.classify);
					$('#money').val(json.wealth);
				})
				hpWindow.open("#cBtn", "html/anim.html", {
					title: '自定义弹窗',
					area: ['800px', '500px'],
					btn: ['确认', '取消'], 
					anim:4,
					yes: function(index, layero) {
						layer.msg('确认 按钮 被点击');
						layer.close(index);
					},
					btn2: function(index, layero) {
						layer.msg('取消 按钮 被点击')
						layer.close(index);
					},
					cancel: function(index, layero) {
						layer.msg('x 按钮 被点击')
					}

				});

			});
		</script>

	</body>

</html>